<template>
	<view>
		<map style="width: 100%;height: 300px;" :latitude="latitude" :longitude="longitude" @markertap="markerHandler"
			:markers="covers" scale="16">

		</map>
	</view>
	<view>
		<uni-forms>
			<uni-forms-item label="选择车辆" style="margin: 60rpx;">
				<uni-data-select v-model="value" :localdata="range" placeholder="选择车辆"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item>
				<button style="margin-left: 60rpx;" size="mini" type="primary">查询</button>
				<button style="margin-left: 390rpx;" size="mini" type="primary">取消</button>
			</uni-forms-item>
		</uni-forms>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				value: "",
				range: [],
				latitude: 31.77129,
				longitude: 117.20521,
				covers: [{
					id: 0, // 使用 marker点击事件 需要填写id
					latitude: 31.77281,
					longitude: 117.20447,
					iconPath: "../../static/location.png"
				}, {
					id: 1,
					latitude: 31.77645,
					longitude: 117.20992,
					iconPath: "../../static/location.png"
				}, {
					id: 2,
					latitude: 31.77696,
					longitude: 117.2044,
					iconPath: "../../static/location.png"
				}, ]
			};
		},
		created() {
			this.fetchDataLocally(); // 初始时使用本地数据
		},
		methods: {
			fetchDataLocally() {
				// 模拟从后端获取数据，这里使用本地硬编码的数据
				this.range = [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				];
			},
			fetchDataFromBackend() {
				// 在这个方法中实现从后端获取数据的逻辑
				// 然后将数据赋值给 this.range
			},
			switchToBackendData() {
				this.fetchDataFromBackend(); // 切换为从后端获取数据
			},
			switchToLocalData() {
				this.fetchDataLocally(); // 切换为使用本地数据
			},
			markerHandler(e) {
				console.log(e.detail)
			}
		},
	};
</script>

<style lang="scss">
	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>